<template>
  <div class="gzzl_low">
    <div class="gzzl_low_1">
      <div class="gzzl_low_1_11" style="margin-right: 10px">
        <my-date :items="levelItems" width="300"></my-date>
      </div>
      <div class="gzzl_low_1_1">
        <my-select :items="levelItems" ph="全部客服组" width="160"></my-select>
      </div>
      <div class="gzzl_low_1_1" style="margin-right: 240px">
        <my-select :items="sourceItems" ph="全部客服" width="150"></my-select>
      </div>
      <div class="gzzl_low_1_3">
        <my-button color="none">导出当前数据</my-button>
      </div>
    </div>
    <div class="gzzl_low_card" style="margin-left: 23px">
      <div class="gzzl_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="平均首次响应时长"
          data="30s"
          tip="转接后平均首次响应40s"
        ></tongji-card>
      </div>
      <div class="gzzl_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="平均响应时长"
          data="50s"
          tip="转接后平均响应时长40s"
        ></tongji-card>
      </div>
      <div class="gzzl_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="好评率"
          data="89%"
          tip="客户评价率 78%"
        ></tongji-card>
      </div>
      <div class="gzzl_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="解决量"
          data="550"
          tip="解决率90%"
        ></tongji-card>
      </div>
      <div class="gzzl_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="一次性解决量"
          data="60"
          tip="一次性解决率 65%"
        ></tongji-card>
      </div>
    </div>
    <div class="gzzl_low_tjt">
      <div>
        <div class="gzzl_low_tjt-title">首次响应时长会话量统计</div>
        <div
          ref="gzzl_low_tjt_left"
          :style="{ width: '500px', height: '350px' }"
        ></div>
      </div>
      <div>
        <div class="gzzl_low_tjt-title">首次响应时长会话量统计</div>
        <div
          ref="gzzl_low_tjt_right"
          :style="{ width: '500px', height: '350px' }"
        ></div>
      </div>

      <div>
        <div class="gzzl_low_tjt-title">问题解决率占比</div>
        <div
          ref="gzzl_low_tjt_left_radio"
          :style="{ width: '500px', height: '350px' , 'margin-left': '40px'}"
        ></div>
      </div>
      <div>
        <div class="gzzl_low_tjt-title">评价占比</div>
        <div
          ref="gzzl_low_tjt_right_radio"
          :style="{ width: '500px', height: '350px' }"
        ></div>
      </div>
    </div>
    <div style="width: 1020px">
      <div class="gzzl_low_2">
        <base-table :mydata="CzData" :mytitle="CzTitle" type=""></base-table>
      </div>
      <div class="pages" style="padding-top: 20px">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import TongjiCard from "@/components/TongjiCard";
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySelect from "@/components/MyInput/MySelect";
// import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
import MyDate from "@/components/MyInput/MyDate";
export default {
  components: {
    // MySearch,
    MyButton,
    BaseTable,
    MySelect,
    MyDate,
    TongjiCard,
  },
  mounted() {
    this.drawLine1();
    this.drawLine2();
    this.chartFn1();
    this.chartFn2()
  },
  data() {
    return {
      CzData: [
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
        {
          name: "客服小美",
          time: "300",
          time1: "26s",
          time2: "18s",
          time3: "10",
          time4: "10",
          time5: "50",
          time6: "40",
          time7: "5",
          time8: "50",
        },
      ],
      CzTitle: [
        {
          name: "客户昵称",
          prop: "name",
          width: 89,
        },
        {
          name: "有效会话数量",
          prop: "time",
          width: 130,
        },
        {
          name: "首次平均响应时长",
          prop: "time1",
          width: 130,
        },
        {
          name: "平均响应时长",
          prop: "time2",
          width: 130,
        },
        {
          name: "已解决",
          prop: "time3",
          width: 65,
        },
        {
          name: "未解决",
          prop: "time4",
          width: 65,
        },
        {
          name: "好评",
          prop: "time5",
          width: 98,
        },
        {
          name: "中评",
          prop: "time6",
          width: 98,
        },
        {
          name: "差评",
          prop: "time7",
          width: 98,
        },
        {
          name: "未评",
          prop: "time8",
          width: 98,
        },
      ],
      sourceItems: [
        {
          label: "王美美",
          value: 0,
        },
        {
          label: "七尾",
          value: 1,
        },
        {
          label: "李想",
          value: 2,
        },

        {
          label: "王志",
          value: 3,
        },
      ],
      levelItems: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "客服组一",
          value: 1,
        },
        {
          label: "客服组二",
          value: 2,
        },

        {
          label: "客服组三",
          value: 3,
        },
      ],
    };
  },
  methods: {
    drawLine1() {
      let myChart = this.$echarts.init(this.$refs.gzzl_low_tjt_left);
      myChart.setOption({
        // title: { text: '单会话消息数统计' },
        tooltip: {},
        grid: {
          // x: "12%",//x 偏移量
          // y: "20%", // y 偏移量
          width: "90%", // 宽度
          height: "70%", // 高度
        },
        xAxis: {
          data: ["0-10", "10-20", "20-30", "30-40", "40-50"],
        },
        yAxis: {},
        series: [
          {
            name: "会话消息数",
            type: "bar",
            barWidth: 30,
            data: [7, 8, 10, 6, 5],
            barGap: "5%",
            barCategoryGap: "50%",
            itemStyle: { normal: { color: "	#006effe5" } },
          },
        ],
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.gzzl_low_tjt_right);
      // 绘制图表
      myChart.setOption({
        // title: { text: "单会话时长统计" },
        tooltip: {},
        grid: {
          // x: "12%",//x 偏移量
          // y: "20%", // y 偏移量
          width: "90%", // 宽度
          height: "70%", // 高度
        },
        xAxis: {
          //     axisLabel: {
          //     interval: 1
          // },
          data: ["30s以下", "30s-2m", "2m-5m", "5m-10m", "10m以上"],
        },
        yAxis: {},
        series: [
          {
            name: "会话时长",
            type: "bar",
            barWidth: 30,
            data: [7, 8, 10, 6, 5],
            barGap: "5%",
            barCategoryGap: "50%",
            itemStyle: { normal: { color: "	#006effe5" } },
          },
        ],
      });
    },
    chartFn1() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart6 = this.$echarts.init(this.$refs.gzzl_low_tjt_left_radio);
      pieChart6.setOption({
        title: {
          // text: "问题解决率占比",
          x: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["未解决 880", "已解决 300"],
        },

        series: [
          {
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
              },
            },

            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 800,
                name: "未解决 880",
                itemStyle: { normal: { color: "	#006effe5" } },
              },
              {
                value: 300,
                name: "已解决 300",
                itemStyle: { normal: { color: "	#FF8C00" } },
              },
            ],
          },
        ],
      });
    },
    chartFn2() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart7 = this.$echarts.init(this.$refs.gzzl_low_tjt_right_radio);
      pieChart7.setOption({
        title: {
          text: "评价占比",
          x: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["好评 880 40%", "中评 300 30%", "差评 130 20%"],
        },

        series: [
          {
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
              },
            },

            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 800,
                name: "好评 880 40%",
                itemStyle: { normal: { color: "	#006effe5" } },
              },
              {
                value: 300,
                name: "中评 300 30%",
                itemStyle: { normal: { color: "	#FF8C00" } },
              },
              {
                value: 300,
                name: "差评 130 20%",
                itemStyle: { normal: { color: "	#FF8C00" } },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style>
.gzzl_low {
  width: 1040px;
  /* height: 1350px; */
  background-color: #ffffff;
  padding-top: 3px;
}
.gzzl_low_1_11 {
  padding-left: 10px;
}
.gzzl_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 12px;
}
.gzzl_low_1_1 {
  margin-right: 10px;
}
.gzzl_low_card {
  display: flex;
  margin-top: 25px;
}
.gzzl_low_2 {
  width: 100%;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 10px;
}
.gzzl_low_tjt {
  display: flex;
  flex-wrap: wrap;
}
.gzzl_low_tjt-title {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  padding: 20px 20px 0;
}
</style>